<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>商品列表</title>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/basestyle.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />

</head>
<body >
<div style="background-color: white;font-family：'Microsoft Yahei',Arial, Helvetica, sans-serif; font-size: 14px;">
	<ul class="mod-filter clearfix">
			<div class="white-bg_2 bb1 " id="categoryOrderBy">
		   	      <img style="height: 25px; width: 25px;margin:0.8rem 48%;" src="images/loading.gif" alt="加载中" ppsrc="img/0da8eb94-0159-4700-a6a5-bc007da5a853.jpg"/>
			</div>
	</ul>
    <ul id="list">
      <li class="tab">
         <a href="#" >
		   	 <img style="height: 25px; width: 25px;margin:20rem 47%;" src="images/loading.gif" alt="加载中" ppsrc="img/0da8eb94-0159-4700-a6a5-bc007da5a853.jpg">
		 </a>
    </ul>
    <div id="pullUp"><span>--上拉加载--</span></div>
    <div style="height: 55px;"></div>
</div>
<!-- <div id="spinner">
  <div class="loading-box">
    <div class="list-loading-icon">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </div>
</div> -->
<footer class="footer">
  <div class="foot-con">
	<div class="foot-con_2">
		<a href="../index.html">
			<i class="navIcon home"></i>
			<span class="text">首页</span>
		</a>
		<a href="../category.html">
			<i class="navIcon sort"></i>
			<span class="text">分类</span>
		</a>
		<a href="../shopcart.html">
			<i class="navIcon shop"></i>
			<span class="text">购物车</span>		
		</a>
		<a href="./userhome.html">
			<i class="navIcon member"></i>
			<span class="text">我的</span>
		</a>
	</div>
  </div>
</footer>
<!-- <div class="wx-footer2 tab">
  <a href="index.html" class="active"><i class="icon-v2 fbh"></i><p>发布会</p></a>
  <a href="guang.html" class=""><i class="icon-v2 guang"></i><p>逛</p></a>
  <a href="maimaiquan.html" class=""><i class="icon-v2 mmq"></i><p>买卖圈</p></a>
  <a href="wode.html" class=""><i class="icon-v2 wo"></i><p>我</p></a>
</div> -->
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<!-- cookie操作js -->
<script charset="utf-8" src="../js/global.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script charset="utf-8" src="../js/StringBuilder.js"></script>
<script charset="utf-8" src="../js/templeteHtml.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
//首先，窗口绑定事件scroll  
var page=1;
var rows=10;
var orderBy="";
var tagsId=parseURL(window.location.search).id;
$(window).bind("scroll",function() {  
	$("#pullUp span").html("--上拉加载...--")
    // 判断窗口的滚动条是否接近页面底部，这里的20可以自定义  
    if ($(document).scrollTop() + $(window).height() == $(document).height() ) {  
    	console.log(page);
       //没有写ajax的调用，直接触发了链接的click事件。
       	$("#pullUp span").html("--加载数据中...--")
		// 异步加载数据
      appendData();
    }
})
function appendData(){
	 $.get("../product/listPageByTagsAndOrderBy",{tags:tagsId,page:page,rows:rows,orderBy:orderBy},function(ret){
			if(ret&&ret.data&&ret.data.list.length>0){
				var xxProductListPage=ret.data.list;
				page+=1;
				if(xxProductListPage!=undefined&&xxProductListPage.length>0){
					for(var i=0;i<xxProductListPage.length;i++){
						$("#list .tab").append(String.formatmodel(templete.getProductByTagsTeml(),xxProductListPage[i]));
					}
				}
			}else{
				$("#pullUp span").html("--我也是有底线的--")
			}
 })
}
/**
 * 刷新页面滚动到顶部
 */
$(document).ready(function(){  
    $('body,html').animate({scrollTop:0});   
});
//加载初始化页面数据
loadProductPageData();
function loadProductPageData(){
	  $.get("../product/listPageByTagsAndOrderBy",{tags:tagsId,page:page,rows:rows,orderBy:orderBy},function(ret){
			if(ret&&ret.data&&ret.data.list.length>0){
				$("#list .tab").html("")
				var xxProductListPage=ret.data.list;
				console.log(ret.data);
				if(xxProductListPage!=undefined&&xxProductListPage.length>0){
					for(var i=0;i<xxProductListPage.length;i++){
						$("#list .tab").append(String.formatmodel(templete.getProductByTagsTeml(),xxProductListPage[i]));
					}
				}
				page+=1;
				console.log($(document).height());
				console.log($(document).scrollTop() + $(window).height());
				if($(document).scrollTop() + $(window).height() == $(document).height()){
					appendData();
				}
			}else{
				$('#list .tab').html('<a href="#" style="display: block;margin:24rem 23%;">--未查询到该分类商品信息--</a>');
			}
    }) 
}
//排序规则按钮加载
$.get("../xxProductCategory/listOrderByCategoreyObject",{},function(ret){
	if(ret&&ret.code==200){
		var datas=ret.data;
		var categoryOrderBy="";
		for(var i=0;i<datas.length;i++){
			var datas1=eval('('+ datas[i]+ ')');
			if(i==0){
				categoryOrderBy+='<li id="'+datas1.orderBy+'" class="active">';
				orderBy=datas1.orderBy+" desc";
			}else{
				categoryOrderBy+='<li id="'+datas1.orderBy+'" >';

			}
			categoryOrderBy+='<a title="'+datas1.name+'"  href="javascript:void(0);">'+datas1.name;
			if(i!=0){
				categoryOrderBy+='<i class="icon_sort"></i>';
			}
			categoryOrderBy+='</a></li>';
		}
		$("#categoryOrderBy").html(categoryOrderBy);
		categoryClick();
		//initProductData();//默认为空排序
	}else{
		floatNotify.simple("加载失败！");
	}
},'json')

//分类点击效果显示
function categoryClick(){
	$("ul #categoryOrderBy li").bind("click",function() {
		var id = $(this).attr("id");
		$("ul #categoryOrderBy li").each(function(i) {
			if (id != $(this).attr("id")) {
				$(this).removeClass("active");
			}
		});
		$(this).addClass("active");
		var iElement=$(this).find("i");
		page=1;
			if ($(iElement).hasClass("icon_sort_up")) {
				orderBy = id+" asc";
				$(iElement).attr("class","icon_sort_down");

			} else if($(iElement).hasClass("icon_sort_down")){
				orderBy = id+" desc";
				$(iElement).attr("class","icon_sort_up");

			}else{
				orderBy = id+" desc";
				$(iElement).attr("class","icon_sort_up");
			}

		$(this).siblings().find("i").attr("class","icon_sort");

		var no_results=$.trim($("#no_results").html());
		if(no_results!="" && no_results!=null && no_results!=undefined){
			return false;
		}
		loadProductPageData();
	});
}
</script>
</body>
</html>